<template>
    <div class="box">
        <div class="buts">
            <el-button type="success" @click="updata">标记已读</el-button>

            <el-button type="danger" @click="deldata">
                <Delete style="width: 1em; height: 1em; margin-right: 8px" />删除
            </el-button>
        </div>

        <el-table   class='table' ref="multipleTableRef" :data="tableData" border="1px" cellspacing="0" style="width: 100%"
            @selection-change="handleSelectionChange" >
            <el-table-column width="40" style="text-align: center;"  >
                <template #default="scope"><span @click="a(tableData.findIndex(item => item._id.includes(scope.row._id)) )">{{ tableData.findIndex(item => item._id.includes(scope.row._id))
                    + 1 }}</span></template>

            </el-table-column>
            <el-table-column type="selection" width="40" />
            <el-table-column label="类型" prop="type" width="120" style="text-align: center;" />
            <el-table-column property="content" label="信息内容" width="700" />
            <el-table-column property="address" label="时间">
                <template #default="scope">{{ new Date(scope.row.date).toLocaleString().replaceAll('/', '-') }}</template>
            </el-table-column>
            <el-table-column property="address" label="状态" width="100">
                <template #default="scope">{{ scope.row.status ? '已读' : '未读' }}</template>
            </el-table-column>
        </el-table>
        <div class="dfy">
            <div class="fy">
                <div class="fy">
                    <el-button @click="one"><el-icon>
                            <DArrowLeft />
                        </el-icon></el-button>
                    <el-button @click="up"><el-icon>
                            <ArrowLeft />
                        </el-icon></el-button>
                  
                        <el-select  @change="pageChange" v-model="selectVal" placeholder="Select" size="large" style="width: 140px; height:33px;border: 0;min-height: 33px" >
                            <el-option v-for="item in pageList" :key="item.key" :label="item.label" :value="item.value" />
                        </el-select>
                 
                    <el-button @click="bottom"><el-icon>
                            <ArrowRight />
                        </el-icon></el-button>
                    <el-button @click="after"><el-icon>
                            <DArrowRight />
                        </el-icon></el-button>
                </div>
                <el-button style="margin-left: 10px;" @click="sx"><el-icon>
                        <Refresh />
                    </el-icon></el-button>
            </div>
            <span><span>共计录{{ tatol }}条</span> &nbsp;每页<input type="number" class="in" v-model="pagesize">条</span>
        </div>


    </div>
</template>

<script lang="ts" setup>
import { computed, onMounted, Ref, ref } from 'vue'
import { ElTable } from 'element-plus'
import axios from 'axios';
import { ElMessage } from 'element-plus'
axios.defaults.baseURL = "http://127.0.0.1:3000/mine"

interface User {
    date: string
    name: string
    address: string
}

let a = (e:any) => {
    let c = document.querySelectorAll('.el-table__row')
    c.forEach((i,index) => {
        document.querySelectorAll('.el-table__row')[index].style.background = ''
    })
    document.querySelectorAll('.el-table__row')[e].style.background = '#DFF0D8'
    
 
}
    
const multipleTableRef = ref<InstanceType<typeof ElTable>>()
const multipleSelection = ref<User[]>([])

let up = () => {
    page.value -= 1
    getdata()
}
let bottom = () => {
    page.value += 1
    getdata()
}

let one = () => {
    page.value = 1
    getdata()
}
let sx = () => {
    getdata()
}
let after = () => {
    page.value = Math.ceil(tatol.value / pagesize.value)
    getdata()
}
let page: Ref<number> = ref(1)
let pagesize: Ref<number> = ref(5)
let tatol: Ref<number> = ref(0)

const selectVal = computed(() => {
    return `第${page.value}页/共${Math.ceil(tatol.value/pagesize.value)}页`
})
const pageList = computed(() => {
    let arr = []
    for (let i = 1; i <= Math.ceil(tatol.value / pagesize.value); i++){
        arr.push({
            key: i,
            label: `第${i}页`,
            value:i
        })
    }
    return arr
})
const pageChange = (val) => {
    page.value = val
    getdata()
}

const handleSelectionChange = (val: any) => {
    multipleSelection.value = []
    val.forEach((element: object) => {
        multipleSelection.value.push(element._id)
    });

}

let tableData: object = ref([])
let getdata = () => {

    axios.get(`/getdata?page=${page.value}&pagesize=${pagesize.value}`).then(res => {
        tableData.value = res.data.data
        tatol.value = res.data.tatol
        console.log(res.data.tatol);

    })
}
let deldata = () => {
    console.log(multipleSelection.value.length);

    if (multipleSelection.value.length == 0) {
        ElMessage({
            message: '没有选中记录',
            type: 'warning',
        })
    }
    else {
        axios.delete('/del', { params: { ids: multipleSelection.value } }).then(res => {
            getdata()
        })
    }
}

let updata = () => {
    console.log(multipleSelection.value.length);

    if (multipleSelection.value.length == 0) {
        ElMessage({
            message: '没有选中记录',
            type: 'warning',
        })
    }
    else {
        axios.put('/update', { ids: multipleSelection.value }).then(res => {
            getdata()
        })
    }
}
onMounted(() => {
    getdata()
    console.log(tableData);
})


</script>

<style  scoped>

.el-select--large .el-select__wrapper {
    font-size: 14px;
    gap: 6px;
    line-height: 24px;
    min-height: 32px;
    padding: 8px 16px;
}
.in {
    width: 40px;
    text-align: center;
    height: 24px;
    border: 1px #dddddd solid;
    margin: 0px 2px;
    font-size: 12px;
}


.dfy {
    display: flex;
    justify-content: space-between;
}

.box {
    height: 100vh;
    width: 100%;
    background-color: #fff;
    padding: 20px;
}

.el-button+.el-button {
    margin-left: 0;
}

.table {
    text-align: center;
}

.fy {
    display: flex;
}

.buts {
    display: flex;
    justify-content: space-between;
    align-content: center;
    margin-bottom: 20px;
}
</style>